<template>
	<div>
		<div class="breadcrumb">
			<!-- <breadcrumb></breadcrumb> -->
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>{{companyName}}</el-breadcrumb-item>
				<el-breadcrumb-item>通讯录管理</el-breadcrumb-item>
				<el-breadcrumb-item>成员列表</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="tableNavBox">
			<el-tabs v-model="activeName" @tab-click="tabsClick">
				<el-tab-pane label="已审核" name="1">
					<yetAudited></yetAudited>
				</el-tab-pane>
				<el-tab-pane label="待审核" name="2">
					<noAudited></noAudited>
				</el-tab-pane>
				<el-tab-pane label="已邀请" name="3">
					<yetInvite></yetInvite>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script>
	// import breadcrumb from '../components/breadcrumb.vue'
	import yetAudited from './components/yetAudited.vue'
	import noAudited from './components/noAudited.vue'
	import yetInvite from './components/yetInvite.vue'
	export default {
		components:{
			// breadcrumb
			yetAudited, // 已审核
			noAudited, // 待审核
			yetInvite // 已邀请
		},
		data() {
			return {
				activeName: '1',
				companyId: '',
				companyName: this.$store.state.company.companyName,
			}
		},
		mounted(){
			this.companyId = this.$store.state.company.selectCompanyId?this.$store.state.company.selectCompanyId:this.$store.state.company.companyId
			
		},
		methods: {
			tabsClick(tab, event) {
				console.log(tab);
			},
			
		}
	}
</script>

<style scoped="scoped">
	.breadcrumb,
	.tableNavBox {
		padding: 20px;
	}

	.tableNavBox {
		padding-top: 0;
	}
</style>
